<template>
	<view class="btn-box">
	  <view class="bot-cart"  @tap="viewGoods">
	    <view class="tips-num"> {{ cartNum?cartNum:0 }} </view>
	    <image src="/static/tabIcon/cart.png" class="img" />
	  </view>
	  <view class="bot-price-btn">
	    <view class="bot-price">
	      合计：<text>￥<text>{{cartPrice}}</text></text>
	    </view>
	    <view class="btn" @tap="emit('goResult')"> 去结算 </view>
	  </view>
	</view>
		<uni-popup ref="popupRef" type="bottom" @maskClick="viewGoods">
			<view class="goods-list">
				<view class="title">
					<view class="txt"> 已加购商品 </view>
					<view class="empty" @tap="empty"> 清空 </view>
				</view>
				<view class="goods" v-for="item in goods" :key="item">
					<OneGoods :goodsInfo="item" :nav="false"/>
				</view>
			</view>
		</uni-popup>
</template>

<script setup>
	import { computed, ref, watch } from 'vue';
	import OneGoods from '@/components/OneGoodsItem.vue'
	import { useCartStore } from '@/store/index.js'
	import { DelToCartApi } from '@/service/index.js'
	const emit = defineEmits(['emptyCart', 'goResult'])
	const props = defineProps(['cartNum', 'cartPrice', 'goods'])
	const isShow = ref(false)
	const popupRef = ref()
	const viewGoods = () => {
		if(props.cartNum==0) return
		if(isShow.value == false) {
			isShow.value = true
			popupRef.value.open()
		} else {
			isShow.value = false
			popupRef.value.close()
		}
	}
	const empty = () => {
		const sku = []
		props.goods.forEach(item => {
			sku.push(item.sku)
		})
		DelToCartApi({sku}).then(res => {
			emit('emptyCart')
			isShow.value = false
			popupRef.value.close()
		})
	}
</script>

<style scoped lang="scss">
	.btn-box {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
		z-index: 99;
	  display: flex;
	  align-items: center;
	  background-color: #FFFFFF;
	  justify-content: space-between;
	  width: 100%;
	  height: 50px;
	  padding: 0 12px;
	  box-sizing: border-box;
	  .bot-cart {
	    position: relative;
	    width: 29px;
	    height: 29px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    .img {
	      width: 29px;
	      height: 29px;
	    }
	    .tips-num {
	      position: absolute;
	      top: 0;
	      right: -50%;
	      transform: translate(-50%, -50%);
	      width: 16px;
	      height: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
	      color: #FFFFFF;
	      font-size: 12px;
	      font-weight: 500;
	      border-radius: 50%;
	      background: #F53F3F;
	    }
	  }
	  .bot-price-btn {
	    display: flex;
	    align-items: center;
	    .bot-price {
	      font-weight: 400;
	      font-size: 14px;
	      color: #666666;
	      text {
	        font-weight: 700;
	        font-size: 14px;
	        color: #FF3B1E;
	        text {
	          font-weight: 700;
	          font-size: 20px;
	          color: #FF3B1E;
	        }
	      }
	    }
	    .btn {
	      width: 102px;
	      height: 40px;
	      color: #FFFFFF;
	      font-size: 16px;
	      font-weight: 400;
	      text-align: center;
	      line-height: 40px;
	      background: #FF3B1E;
	      margin-left: 10px;
	      border-radius: 99px;
	    }
	  }
	}
	.goods-list {
		padding: 0 12px 50px;
		background-color: #FFF;
		box-sizing: border-box;
		border-radius: 10px 10px 0 0 ;
		border-top: 1px solid #e5e5e5;
		overflow: hidden;
		box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
		.title {
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.txt {
				color: #333;
				font-size: 16px;
				font-weight: bold;
			}
			.empty {
				color: #666666;
				font-size: 14px;
			}
		}
		.goods {
			padding: 10px 12px;
			background-color: #FFFFFF;
		}
	}
</style>